<template>
  <div id="order" class="container">

    <h3 class="title"><span />关键词管理</h3>
    <el-tabs id="tabcard" v-model="activeName" class="tabs" type="card" @tab-click="handleClick">

      <el-tab-pane label="关键词监控" name="2">
        <div class="searchBtn">
          <el-radio-group v-model="engine" size="medium" @change="changeEngine">
            <el-radio-button label="baidupc">百度PC</el-radio-button>
            <el-radio-button label="baidumobile">百度移动</el-radio-button>
            <el-radio-button label="haosou">360PC</el-radio-button>
            <el-radio-button label="sogoumobile">搜狗移动</el-radio-button>
          </el-radio-group>
        </div>
        <el-row :gutter="20" class="monitor">
          <el-col :span="6">
            <div class="box">
              <div class="icon el-icon-data-analysis" />
              <div class="text">
                <p> <b>排名第一页：{{ queryData.first?queryData.first:0 }}个</b></p>
                <p>统计日期：2021-10-19</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="box second">
              <div class="icon el-icon-data-line" />
              <div class="text">
                <p><b>排名前十页：{{ queryData.ten?queryData.ten:0 }}个</b></p>
                <p>统计日期：2021-10-19</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="box third">
              <div class="icon el-icon-pie-chart" />
              <div class="text">
                <p> <b>达标关键词个数：{{ queryData.done?queryData.done:0 }}个</b> </p>
                <p>累计统计日期：2021-10-19</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="box fourth">
              <div class="icon el-icon-data-board" />
              <div class="text">
                <p><b>关键词总数：{{ queryData.all?queryData.all:0 }}个</b>  </p>
                <p>累计统计日期：2021-10-19</p>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="topbar">
          <div class="bar-left">
            <span>关键词过滤：</span>
            <el-radio-group v-model="rank" size="small" @change="changeRank">
              <el-radio-button label="1">第一名</el-radio-button>
              <el-radio-button label="3">前三名</el-radio-button>
              <el-radio-button label="10">第一页</el-radio-button>
              <el-radio-button label="30">前三页</el-radio-button>
              <el-radio-button label="50">前五页</el-radio-button>
              <el-radio-button label="100">前十页</el-radio-button>
            </el-radio-group>
            <span class="btn restBtn" @click="rest">重置</span>
          </div>
          <div class="bar-right">
            <el-input v-model="keywords" placeholder="请输入关键词" />
            <el-button type="primary" style="border-color:#fc561c" @click="search">查询</el-button>
          </div>
        </div>
        <div class="content">
          <el-table
            border
            stripe
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
            :data="resultData"
          >
            <el-table-column label="关键词名称" prop="keyword" />
            <el-table-column label="最高排名" prop="top_rank" />
            <el-table-column label="采集区域" prop="area" />
            <el-table-column label="采集IP" prop="ip" />
            <el-table-column label="采集网络" prop="network" />
            <el-table-column label="关键词收录量" prop="collect_count" />
            <!-- <el-table-column label="页面标题" prop="page_title" /> -->
            <!-- <el-table-column label="页面链接地址" prop="page_url" /> -->
            <el-table-column label="搜索引擎" prop="search_engine" />
            <!-- <el-table-column label="网站权重" prop="site_weight" /> -->
            <!-- <el-table-column label="" prop="top100" /> -->
            <el-table-column label="操作" width="200px" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" class="orange" size="mini" @click="checkInfo(scope.row)">详情</el-button>
                <el-button type="primary" size="mini" @click="checkNew(scope.row)">数据更新</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <BouncedDialog title="详情" :dialog-show.sync="dialogInfo" :width="50" class="link">
          <el-table
            :data="resultInfo"
            border
            stripe
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
          >
            <el-table-column label="页面标题" prop="page_title" show-overflow-tooltip />
            <el-table-column label="页面链接地址" prop="page_url" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-link :href="scope.row.page_url" target="_blank">{{ scope.row.page_url }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="网站权重" prop="site_weight" />
            <el-table-column label="网站域名" prop="site_url" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-link :href="'http://'+scope.row.site_url" target="_blank">{{ scope.row.site_url }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="排名" prop="rank" />
          </el-table>
        </BouncedDialog>
        <div class="note">
          <p>注意事项</p>
          <ul>
            <li>排名数据每日0点-9点进行更新，同时也可以通过数据更新按钮进行排名即时查验;</li>
            <!-- <li>关键词排名列表上，0标识排名没有进入到前100位。</li> -->
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="关键词管理" name="1">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          style="margin:0 15px 15px"
          @click="goAdd"
        >添加站点关键词</el-button>
        <a :href="downurl" download="">
          <el-button size="small" type="primary" class="orange el-icon-download">下载关键词模板</el-button>
        </a>
        <el-upload
          :headers="myHeaders"
          :data="uploadData"
          class="avatar-uploader"
          :action="$store.getters.updateURL+'keyword/import'"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :on-change="handleChangePic"
        >
          <el-button size="small" type="primary" style="background-color:#6f6f95" icon="el-icon-upload2">导入关键词</el-button>
        </el-upload>
        <BouncedDialog :title="addForm.id?'编辑':'添加'" :dialog-show.sync="dialogShow" :width="50" class="keyword">
          <el-form ref="addForm" :model="addForm" :rules="rules" inline class="addForm" label-width="80px">
            <el-form-item label="选择站点" prop="website_id">
              <el-select v-model="addForm.website_id" placeholder="请选择站点" disabled>
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.domain"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="关键词" prop="name">
              <el-input v-model="addForm.name" />
            </el-form-item>
            <el-form-item label="链接" prop="url">
              <el-input v-model="addForm.url" />
            </el-form-item>
            <el-form-item label="位置">
              <el-input v-model="addForm.position" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="addForm.status">
                <el-option label="正常" :value="1" />
                <el-option label="暂停" :value="2" />
              </el-select>
            </el-form-item>
            <div class="btn">
              <el-button @click="dialogShow = false">取 消</el-button>
              <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
          </el-form>
        </BouncedDialog>
        <!-- <el-button type="danger" size="small" icon="el-icon-delete" @click="Batchdelete">批量删除</el-button> -->
        <el-table
          :data="keywordData"
          border
          stripe
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column label="ID" prop="id" width="75" />
          <el-table-column label="关键词" prop="name" show-overflow-tooltip />
          <el-table-column label="链接" prop="url" show-overflow-tooltip />
          <el-table-column label="分布位置" prop="position" />
          <el-table-column label="百度PC" prop="baidu_pc" />
          <el-table-column label="百度MOB" prop="baidu_mob" />
          <el-table-column label="360PC" prop="three_pc" />
          <el-table-column label="搜狗MOB" prop="sougou_pc" />
          <el-table-column label="操作" width="220px" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" class="orange" size="mini" @click="check(scope.row)">查看</el-button>
              <el-button type="primary" size="mini" @click="goedit(scope.row)">编辑</el-button>
              <el-button class="dele" size="mini" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <BouncedDialog title="关键词趋势图" :dialog-show.sync="dialogShow2" :width="50" class="keyword">
          <div>
            <Echarts ref="echarts" :keyword-data="keywordsData" />
          </div>
        </BouncedDialog>
        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          :hide-on-single-page="page.total<page.size?true:false"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
import keywordApi from '@/api/market/keywords.js'
import websiteApi from '@/api/website.js'
import Echarts from './echarts.vue'
import { getToken } from '@/utils/auth'
var token = 'Bearer ' + getToken()
export default {
  components: { Echarts },
  data() {
    return {
      keywords: '',
      engine: 'baidupc',
      rank: '',
      downurl: '',
      keywordData: [], // 关键词列表
      dialogShow: false,
      options: [], // 站点下拉选项
      addForm: {
      },
      dialogShow2: false,
      addForm2: {}, // 编辑
      keywordIds: [], // 关键词id数组
      rules: {
        website_id: [
          { required: 'true', message: '请选择站点', trigger: 'change' }
        ],
        name: [
          { required: 'true', message: '请输入关键词名称', trigger: 'blur' }
        ],
        url: [
          { required: 'true', message: '请输入关键词链接', trigger: 'blur' }
        ]
      },
      rules2: {
        keyword_id: [
          { required: 'true', message: '请选择关键词', trigger: 'change' }
        ],
        website_id: [
          { required: 'true', message: '请选择站点', trigger: 'change' }
        ]
      },
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      val: {

      },
      id: '',
      siteId: '',
      activeName: '2',
      myHeaders: { Authorization: token },
      uploadData: {},
      resultData: [],
      dialogInfo: false,
      resultInfo: [],
      queryData: {},
      keywordsData: []
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val
      this.uploadData = {
        website_id: val
      }

      this.getList()
      this.getQuery()
    }
  },
  created() {
    this.getWebsiteList()
    this.siteId = this.$store.getters.siteId
    this.uploadData = {
      website_id: this.$store.getters.siteId
    }

    this.getList()
    this.getDownload()
    if (this.siteId) {
      this.getQuery()
    }
  },
  mounted() {
    // this.getTikets()
  },
  updated() {

  },
  methods: {
    // 查看详情
    checkInfo() {
      this.dialogInfo = true
    },
    // 查看最新
    checkNew() {

    },
    changeEngine(val) {
      this.rank = ''
      this.engine = val
      this.getQuery()
    },
    changeRank(val) {
      this.rank = val
      this.getQuery()
    },
    rest() {
      this.rank = ''
      this.getQuery()
    },
    // 查询
    search() {
      this.getQuery()
    },
    // 关键词监控
    getQuery() {
      const val = {
        // website_id: this.siteId,
        website_id: 3,
        engine: this.engine,
        rank: this.rank,
        keyword: this.keywords
      }
      keywordApi.keywordQuery(val).then(res => {
        if (res.code == 0) {
          this.queryData = res.data.count
          this.resultData = res.data.pageData.data
          if (this.resultData.length > 0 && res.data.pageData.data[0].ranks.length > 0) {
            this.resultInfo = res.data.pageData.data[0].ranks
          }
        }
      })
    },
    // 下载关键词模板
    getDownload() {
      keywordApi.keywordDownload().then(res => {
        if (res.code == 0) {
          this.downurl = res.data
        }
      })
    },
    // 上传切换
    handleChangePic(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    beforeAvatarUpload(file) {

    },

    handleAvatarSuccess(res, file) {
      if (res.code == 0) {
        this.$message.success(res.msg)
      } else {
        this.$message.error(res.msg)
      }

      // const isxls = file.type ===
    },
    // 查看
    check() {
      // 模拟随机数
      var i = 0
      this.keywordsData = []
      for (i;i < 7;i++) {
        const a = parseInt(Math.random() * (300 + 1), 10)
        this.keywordsData.push(a)
      }
      this.dialogShow2 = true
    },
    // 切换tab
    handleClick(val) {
      this.activeName = val.name
      this.getList()
    },
    // 全选
    handleSelectionChange(val) {

    },
    // 批量删除
    Batchdelete() {

    },
    // handlechange() {},
    // 获取站点列表
    getWebsiteList() {
      websiteApi.websiteList().then(res => {
        this.options = res.data

        // this.siteId = res.data[0].id
        // this.getList()
      })
    },
    // 新增
    goAdd() {
      // this.$router.push({ name: 'addKeyWords' })
      this.addForm = {
        id: '',
        name: '',
        url: '',
        status: 1,
        position: '',
        website_id: this.$store.getters.siteId
      }

      this.dialogShow = true
    },
    // 编辑
    goedit(row) {
      // this.$router.push({ name: 'addKeyWords', siteId: this.siteId, id: row.id })
      // this.addForm2.website_id = this.siteId
      // this.addForm2.keyword_id = this.keywordIds
      // this.$set(this.addForm2, 'keyword_id', this.keywordIds)

      this.addForm = {
        id: row.id,
        name: row.name,
        status: row.status,
        position: row.position,
        website_id: row.website_id,
        url: row.url
      }
      this.dialogShow = true
    },
    submitEdit() {
      this.$refs.addForm2.validate((valid) => {
        if (valid) {
          keywordApi.keywordUpdate({ ...this.addForm2 }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.dialogShow2 = false
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    submit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          keywordApi.keywordSave({ ...this.addForm }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.dialogShow = false
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    },

    // 删除
    del(row) {
      const arr = []
      const val = {
        keyword_id: [],
        website_id: row.website_id
      }
      val.keyword_id.push(row.id)
      this.$confirm('此操作将永久删除该关键词, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        keywordApi.keywordDelete(val).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 列表
    getList() {
      this.val.page = this.page.currentPage
      this.val.limit = this.page.size
      this.val.website_id = this.siteId
      // this.val.website_id = 3

      keywordApi.keywordList(this.val).then(res => {
        this.keywordData = res.data
        this.page.total = res.count
        // this.keywordIds = []
        // res.data.forEach(el => {
        //   this.keywordIds.push(el.keyword_id)
        // })

        // this.page.total = res.count
      })
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    }

  }
}
</script>
<style lang='scss'>
#order{
  .el-radio-group{
    .el-radio-button{
      margin-right: 13px;
    }
  .el-radio-button__orig-radio:checked+.el-radio-button__inner{
      background-color: #fa8828;
      border-color: #fa8828;
      color: #fff;
    }
     .el-radio-button__inner{
      border-radius: 30px;
      border-left: solid 1px #dcdfe6;
      color: #555;
      font-size: 14px;
      padding: 0;
      width: 80px;
      height: 30px;
      line-height: 28px;
      text-align: center;
      box-shadow: none;
    }
    .el-radio-button--medium .el-radio-button__inner{
      width: 90px;
      height: 36px;
      line-height: 36px;
    }
  }

  .keyword{
    .el-select{
        width: 100%;
    }
  }
  .addForm .el-form-item{
    width: 100%;
  }
  .addForm .el-form-item__content{
      width:calc(100% - 80px)
    }
  .bar-right{
    .el-button{
      width: 92px;
    }
    .el-input{
      .el-input__inner{
        border-radius: 60px;
      }
    }
  }
}
#tabcard{
  .el-upload-list{
    display: inline-block;
    vertical-align: top;
    margin-top: -5px;
  }
}
</style>
<style scoped lang='scss'>
.el-tab-pane{
  padding-bottom: 20px;
}
.avatar-uploader{
  display: inline-block;
  margin-left: 15px;
}
  .el-table{
    margin-bottom: 20px;
  }
  .topbar{
    // background-color: #f84311;
    margin-top: 20px;
    padding: 20px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    color: #333;
    font-size: 15px;
    .bar-left{
      .btn{
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        border-radius: 30px;
        text-align: center;
        margin-right: 13px;
        font-size: 14px;
        cursor: pointer;
        border: solid 1px #dcdfe6;
        color: #555;
      }
      .btn.restBtn{
        border: none;
        background-color: #fc561c;
        color: #fff;
      }
    }
    .bar-right{
      position: relative;
      .el-button{
        position: absolute;
        right: 0;
      }
      .el-input{
        width: 280px;
        .el-input__inner{
          border-radius: 60px;
        }
      }
    }
  }
  .monitor{
    padding: 0 20px;
    .box{
      padding:0 20px;
      height: 120px;
      background-color: #fc561c;
      display: flex;
      justify-content: left;
      align-items: center;
      color: #fff;
      border-radius: 5px;
      .icon{
        font-size: 55px;
        margin-right: 20px;
      }
      .text{
        line-height: 25px;
        font-size: 15px;
      }
    }
    .box.second{
      background-color: #6f6f95;
    }
    .box.third{
      background-color: #f9b633;
    }
    .box.fourth{
      background-color: #fa8828;
    }
  }
  .note{
    font-size: 14px;

    p{
      line-height:50px;
      border-bottom: solid 1px #eee;
      text-indent: 1.3em;
    }
    ul{
      margin: 20px 0 20px;
      padding-left: 35px;
      li{
        line-height: 30px;
        color: #666;
      }
    }
  }
  .content{
    margin-top: 20px;
  }
  .searchBtn{
    margin-bottom: 15px;
    margin-left: 20px;
  }
</style>
